﻿@page "/tree-grid/grid-lines"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
<p>This sample demonstrates visibility of the treegrid lines that separates the rows and columns.</p>
</SampleDescription>
<ActionDescription>
<p> The <code>GridLines</code> property is used to control the line visibility that separates the rows and columns.  TreeGrid allows us to display the following grid lines, </p>
 <ul><li><code>GridLine.Default</code> - Shows the Horizontal line.</li>
     <li><code>GridLine.None</code> - Shows no line.</li>
     <li><code>GridLine.Both</code> - Shows both Horizontal and Vertical lines.</li>
     <li><code>GridLine.Horizontal</code> - Shows the Horizontal line.</li>
     <li><code>GridLine.Vertical</code> - Shows the Vertical line.</li>
 </ul>
 <p> In this demo, we set the vertical GridLine mode for the treegrid component.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" AllowPaging="true" GridLines="GridLine.Both" Height="400">
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="200"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }
}
